<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <link
        rel="stylesheet"
        href="./style/index.css"
    >
    <link
        rel="stylesheet"
        href="./libs/fontawesome/css/all.min.css"
    >
    <link
        rel="shortcut icon"
        href="./images/logo.png"
    >
    <link
        rel="stylesheet"
        href="./libs/swiper-5.4.1/css/swiper.min.css"
    >
    <title>小米闪购</title>
</head>

<body>
    <!-- 头部区域 -->
    <header id="home">
        <nav>
            <ul>
                <li>小米商城<span>|</span></li>
                <li> MIUI<span>|</span></li>
                <li>IoT<span>|</span></li>
                <li>云服务<span>|</span></li>
                <li>金融<span>|</span></li>
                <li>有品<span>|</span></li>
                <li>小爱开发平台<span>|</span></li>
                <li>政企服务<span>|</span></li>
                <li>资质证照</li>
            </ul>
        </nav>
        <div class="info">
            <ul>
                <li>登录<span>|</span></li>
                <li>注册<span>|</span></li>
                <li>消息通知</li>
                <li class="cart"><i class="fas fa-shopping-cart"></i> 购物车 <div class="cart-block">
                        购物车中还没有商品，赶紧选购吧！</div>
                </li>
            </ul>
        </div>

    </header>

    <!-- 内容区 -->
    <div class="wrapper">
        <!-- 导航区 -->
        <nav>
            <img
                src="./images/mi-logo.png"
                alt="logo"
                class="logo"
            >
            <img
                src="./images/mifen.gif"
                alt="gif"
            >
            <div class="nav-list">
                <a href="#">小米手机</a>
                <a href="#">红米</a>
                <a href="#">电视</a>
                <a href="#">笔记本</a>
                <a href="#">家电</a>
                <a href="#">新品</a>
                <a href="#">路由器</a>
                <a href="#">智能硬件</a>
                <a href="#">服务</a>
                <a href="#">社区</a>
            </div>
            <div class="nav-search">
                <input
                    type="text"
                    placeholder="请输入搜索内容"
                >
                <i class="fas fa-search"></i>
            </div>
        </nav>
        <!-- 轮播区 -->
        <div class="carousel">
            <div class="carousel-info">
                <ol>
                    <li><a href="#">手机 电话卡</a></li>
                    <li><a href="#">电视 盒子</a></li>
                    <li><a href="#">笔记本 平板</a></li>
                    <li><a href="#">家电 插线板</a></li>
                    <li><a href="#">出行 穿戴</a></li>
                    <li><a href="#">智能 路由器</a></li>
                    <li><a href="#">电源 配件</a></li>
                    <li><a href="#">健康 儿童</a></li>
                    <li><a href="#">耳机 音响</a></li>
                    <li><a href="#">生活 箱包</a></li>
                </ol>
            </div>
            <!-- 轮播图展示区 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img
                            src="./images/yuan.jpg"
                            alt="王源"
                            style="height: 460px;width:1244px;"
                        ></div>
                    <div class="swiper-slide"><img
                            src="./images/slide2.webp"
                            alt="家电"
                            style="height: 460px;width:1244px;"
                        ></div>
                    <div class="swiper-slide"><img
                            src="./images/slide3.webp"
                            alt="窗帘"
                            style="height: 460px;width:1244px;"
                        ></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>
        </div>
        <!-- 广告区 -->
        <div class="ads">
            <div class="ads-multiple">
                <img src="./images/image1.jpg">
                <img src="./images/image2.jpg">
                <img src="./images/image3.jpg">
                <img src="./images/image1.jpg">
            </div>
            <img src="./images/banner.jpg">
        </div>
        <!-- 产品区 -->

    </div>
    <!-- 展示区 -->
    <div class="items">
        <h1 style="padding-top: 10px;">手 机</h1>
        <div class="item">
            <img
                src="./images/iphone.jpg"
                alt="Mi9"
                style="width: 234;height: 614px; margin-left: 60px;margin-top: 20px;"
            >
            <div class="item-cards">
                <div class="card">
                    <span>新品</span>
                    <img
                        src="./images/figure1.jpg"
                        style="width: 160px;height: 160px;"
                    >
                    <p>小米9 6GB+128GB</p>
                    <p>骁龙855，索尼4800万超广角微距三摄</p>
                    <span>2999元</span>
                </div>
                <div class="card">
                    <span>新品</span>
                    <img
                        src="./images/figure1.jpg"
                        style="width: 160px;height: 160px;"
                    >
                    <p>小米9 6GB+128GB</p>
                    <p>骁龙855，索尼4800万超广角微距三摄</p>
                    <span>2999元</span>
                </div>
                <div class="card">
                    <span>新品</span>
                    <img
                        src="./images/figure1.jpg"
                        style="width: 160px;height: 160px;"
                    >
                    <p>小米9 6GB+128GB</p>
                    <p>骁龙855，索尼4800万超广角微距三摄</p>
                    <span>2999元</span>
                </div>
                <div class="card">
                    <span>新品</span>
                    <img
                        src="./images/figure1.jpg"
                        style="width: 160px;height: 160px;"
                    >
                    <p>小米9 6GB+128GB</p>
                    <p>骁龙855，索尼4800万超广角微距三摄</p>
                    <span>2999元</span>
                </div>
                <div class="card">
                    <span>新品</span>
                    <img
                        src="./images/figure1.jpg"
                        style="width: 160px;height: 160px;"
                    >
                    <p>小米9 6GB+128GB</p>
                    <p>骁龙855，索尼4800万超广角微距三摄</p>
                    <span>2999元</span>
                </div>
                <div class="card">
                    <span>新品</span>
                    <img
                        src="./images/figure1.jpg"
                        style="width: 160px;height: 160px;"
                    >
                    <p>小米9 6GB+128GB</p>
                    <p>骁龙855，索尼4800万超广角微距三摄</p>
                    <span>2999元</span>
                </div>
                <div class="card">
                    <span>新品</span>
                    <img
                        src="./images/figure1.jpg"
                        style="width: 160px;height: 160px;"
                    >
                    <p>小米9 6GB+128GB</p>
                    <p>骁龙855，索尼4800万超广角微距三摄</p>
                    <span>2999元</span>
                </div>
                <div class="card">
                    <span>新品</span>
                    <img
                        src="./images/figure1.jpg"
                        style="width: 160px;height: 160px;"
                    >
                    <p>小米9 6GB+128GB</p>
                    <p>骁龙855，索尼4800万超广角微距三摄</p>
                    <span>2999元</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <footer>
        <span><i class="fas "></i>预约维修服务</span>
        <span>7天无理由退货</span>
        <span>15天免费换货</span>
        <span>满99元包邮</span>
        <span>520余家售后网点</span>
        <hr />
        <div class="footer-links">
            <ol>
                <li class="link-title">帮助中心</li>
                <li>账户管理</li>
                <li>购物指南</li>
                <li>订单操作</li>
            </ol>
            <ol>
                <li class="link-title">服务支持</li>
                <li>售后政策</li>
                <li>自助服务</li>
                <li>相关下载</li>
            </ol>
            <ol>
                <li class="link-title">线下门店</li>
                <li>小米之家</li>
                <li>服务网点</li>
                <li>授权体验店</li>
            </ol>
            <ol>
                <li class="link-title">关于小米</li>
                <li>了解小米</li>
                <li>加入小米</li>
                <li>投资者关系</li>
                <li>企业社会责任</li>
                <li>廉洁举报</li>
            </ol>
            <ol>
                <li class="link-title">关注我们</li>
                <li>新浪微博</li>
                <li>官方微信</li>
                <li>联系我们</li>
                <li>公益基金会</li>
            </ol>
            <ol>
                <li class="link-title">特色服务</li>
                <li>F码通道</li>
                <li>礼物码</li>
                <li>防伪查询</li>
            </ol>
            <div class="footer-number">
                <p>400-100-5678</p>
                <p>8:00-18:00（仅收市话费）</p>
                <p>关注小米：<i class="fab fa-weibo fa-lg"></i>&nbsp;&nbsp;<i
                        class="fab fa-weixin fa-lg"></i></p>
            </div>
        </div>
        <ol class="footer-infos">
            <li>小米商城</li>
            <li>米家</li>
            <li>米聊</li>
            <li>多看</li>
            <li>游戏</li>
            <li>政企服务</li>
            <li>小米天猫店</li>
            <li>小米集团隐私政策</li>
            <li>小米商城隐私政策</li>
            <li>问题反馈</li>
        </ol>
        <img src="./images/truste.png">
        <img src="./images/v-logo-1.png">
        <img src="./images/v-logo-2.png">
        <img src="./images/ba10428a4f9495ac310fd0b5e0cf8370.png">
    </footer>

    <div class="scrollToTop"><a href="#home">TOP</a></div>

    <script src="./libs/jquery-3.4.1.js"></script>
    <script src="./libs/swiper-5.4.1/js/swiper.min.js"></script>
    <script src="libs/smooth-scroll.polyfills.min.js"></script>

    <script>
        var mySwiper = new Swiper('.swiper-container', {
            loop: true,
            effect: 'fade',
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },

            // 指示器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },

            // 控制器
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })

        // 鼠标悬停效果
        mySwiper.el.onmouseover = () => {
            mySwiper.autoplay.stop(); // 停止轮播
        }
        mySwiper.el.onmouseleave = () => {
            mySwiper.autoplay.start(); // 开始轮播
        }

        // 监听窗口改变事件
        window.onresize = () => {
            if (window.innerWidth < 1364) {
                document.body.style.overflowX = 'scroll';
            } else {
                document.body.style.overflowX = 'hidden';
            }
        }

        // 监听窗口滚动事件
        window.addEventListener('scroll', () => {
            const toTopEL = document.querySelector('.scrollToTop');
            if (window.pageYOffset > 1000) {
                toTopEL.style.opacity = 1;
            } else {
                toTopEL.style.opacity = 0;
            }
        })

        // 平滑滚动效果
        const scroll = new SmoothScroll('.scrollToTop a[href*="#"]', {
            speed: 1000, // speed 表示动作时间
            speedAsDuration: true
        })

       
    </script>
</body>

</html>